<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>箭头函数实践</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background: green;
    }
  </style>
</head>

<body>
  <div id="ad"></div>
  <script>
    // 需求-1  点击 div 2s 后颜色变成粉色
    var ad = document.getElementById("ad");

    ad.onclick = function() {
      /* 
        var self = this
        setTimeout(function() {
          self.style.background = "pink"
        }, 2000); 
      */

      setTimeout(() => {
        this.style.background = "pink"
      }, 2000);
    }

    // 需求-2  从数组中返回偶数的元素
    const arr = [1, 6, 9, 10, 100, 25];
    let result1 = arr.filter(function(item) {
      if(item % 2 === 0) {
        return true
      } else {
        return false
      }
    })

    let result2 = arr.filter(item => item % 2 === 0);

    console.log(result1, result2);

    /* 
      箭头函数适合与 this 无关的问题， 定时器， 数组的方法回调
      箭头函数不适合与 this 有关的回调， 事件回调， 对象的方法 
    */

    /* 
      {
        name: '尚硅谷',
        getName: () => {
          this.name
        }
      } 
    */
  </script>
</body>

</html>